<template>
    <div class="sortingTableBox">
        <div class="ulNameBox" v-show="showInput">
            <div class="showInputClose">
                <span @click=" showInput = false">x</span>
            </div>
            <TableTitle style="margin-top:50px">
                <slot>
                    <p style="margin-left:20px">
                        {{showInputTitle}}
                    </p>
                </slot>
            </TableTitle>
            <ul> 
                <li>
                    <el-input
                        ref="rowNo"
                        size="mini"
                        v-model="CONSOLE_NAME"
                        placeholder="请输入内容"
                    ></el-input>
                    <span>操作台名称：</span>
                </li>
                <li>
                    <el-input
                        ref="shelvesCode"
                        size="mini"
                        v-model="CONSOLE_IP"
                        placeholder="请输入内容"
                    ></el-input>
                    <span>操作台IP地址：</span>
                </li>
                <li>
                    <el-select size="mini" v-model="CONSOLE_TYPE" placeholder="请选择">
                        <el-option
                            v-for="item in option2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <span>操作台类型：</span>
                </li>
                <li>
                    <el-select size="mini" v-model="CONSOLE_STATUS" placeholder="请选择">
                        <el-option
                            v-for="item in option1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <span>操作台状态：</span>
                </li>
                <li>
                    <el-input
                    ref="workbinCode"
                    size="mini"
                    v-model="CONSOLE_CALL_BY_WORKBIN"
                    placeholder="请输入内容"
                    ></el-input>
                    <span>叫缓存箱位置：</span>
                </li>
                <li>
                    <el-input
                    ref="col"
                    size="mini"
                    v-model="CONSOLE_WORKBIN_MAX_QUANTITY"
                    placeholder="请输入内容"
                    ></el-input>
                    <span>缓存箱最大操作数：</span>
                </li>
                <li>
                    <el-input
                    ref="toolCode"
                    size="mini"
                    v-model="CONSOLE_CALL_BY_TOOL"
                    placeholder="请输入内容"
                    :disabled= isCONSOLE_CALL_BY_TOOL
                    ></el-input>
                    <span>叫工具器具包位置：</span>
                </li>
                <li>
                    <el-input
                    ref="lengths"
                    size="mini"
                    v-model="CONSOLE_TOOL_MAX_QUANTITY"
                    placeholder="请输入内容"
                    :disabled= isCONSOLE_TOOL_MAX_QUANTITY
                    ></el-input>
                    <span>最大工作器具包数：</span>
                </li>
            </ul>
            <div style="text-align:center">
                <el-button size="mini" type="primary" @click="confirmChangeInfoBtn">保存</el-button>
                <el-button size="mini" type="primary" @click="showInput = false">取消</el-button>
            </div>
        </div>
        <TableTitle>
            <slot>
                <p>
                    操作按钮
                </p>
            </slot>
        </TableTitle>
        <div style="margin-top:5px">
            <el-button size="mini" type="primary" @click="searchBtn">查询</el-button>
            <el-button size="mini" type="primary" @click="taskBtn">分配任务</el-button>
            <el-button size="mini" type="primary" @click="onLineBtn">分拣台上线</el-button>
            <el-button size="mini" type="primary" @click="offLineBtn">分拣台下线</el-button>
            <el-button size="mini" type="primary" @click="addBtn">新增</el-button>
            <el-button size="mini" type="primary" >修改</el-button>
            <el-button size="mini" type="danger" @click="deleteBtn">删除</el-button>
        </div>
        <TableTitle style="margin-top:5px">
            <slot>
                <p>
                    分拣台信息列表
                </p>
            </slot>
        </TableTitle>
        <div class="tableBOx">
            <el-table
                ref="receiveTable"
                size="mini"
                :data="resData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                highlight-current-row
                @cell-dblclick="changeFBtn"
            >
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLENAME" label="分拣台名称"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLEIP" label="分拣台IP地址"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLESTATUS" label="工作状态"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLECALLBYWORKBIN" label="缓存箱叫箱位置"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLEWORKBINMAXQUANTITY" label="最大缓存箱工作数量"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLECALLBYTOOL" label="工作器具包叫箱位置"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="CONSOLETOOLMAXQUANTITY" label="最大工作器具包工作数量"  :show-overflow-tooltip="true"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNumber"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
            >
            </el-pagination>
        </div>
        <div>
            <TableTitle style="margin-top:5px">
                <slot>
                    <p>
                        接收台信息列表
                    </p>
                </slot>
            </TableTitle>
            <MidTable></MidTable>
        </div>
    </div>
</template>
<script>
import { sysSortTableData,sysSortTableTask,sysSortTableOnline,sysSortTableOffline,sysStNewConsole,sysStUpdateConsole,sysStDeleteConsole } from "@/utils/api.js"
import MidTable from './components/MidTable.vue'
import TableTitle from "../../../../components/TableTitle.vue";
export default {
    name:'',
    components:{
        TableTitle,
        MidTable
    },
    data(){
        return{
            pageSize:20,
            pageNumber:1,
            totalCount:0,
            resData:[],
            // 
            showInput:false,
            titleValue:'',
            changeData:[],
            deleteIdList:[],
            option1: [
                {
                value: "1",
                label: "工作",
                },
                {
                value: "2",
                label: "停用",
                },
            ],
            option2: [
                {
                value: "1",
                label: "接收台",
                },
                {
                value: "2",
                label: "分拣台",
                },
            ],
            showInputTitle:'',
            CONSOLE_NAME:'',
            CONSOLE_IP:'',
            CONSOLE_STATUS:'',
            CONSOLE_WORKBIN_MAX_QUANTITY:'',
            CONSOLE_CALL_BY_WORKBIN:'',
            CONSOLE_CALL_BY_TOOL:'',
            CONSOLE_TYPE:'',
            CONSOLE_TOOL_MAX_QUANTITY:'',
            CONSOLEID:'',
            // input
            isCONSOLE_CALL_BY_TOOL:false,
            isCONSOLE_TOOL_MAX_QUANTITY:false,
            midTableChangeData:''

        }
    },
    methods:{
        // 勾选函数
        handleSelectionChange(val) {
            this.changeData = val;
            console.log("val",val);
            this.deleteIdList = []
            for(let i=0;i<val.length;i++){
                this.deleteIdList.push(val[i].CONSOLEID)
            }
        },
        // 选择每页条数后请求接口更新表格
        handleSizeChange(val) {
        this.pageSize = val;
        },
        // 分页函数
        handleCurrentChange(val) {
        this.pageNumber = val;
        },
        searchBtn(){
           sysSortTableData({
                pageParameter:{
                    rows:this.pageSize,
                    page:this.pageNumber
                }
            }).then((res)=>{
                console.log('分拣台数据查询',res)
                if(res.data.retCode == 200){
                    this.resData = res.data.responseBody.result
                    this.totalCount = res.data.responseBody.pageParameter.totalCount
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            }) 
        },
        taskBtn(){
            sysSortTableTask({

            }).then((res)=>{
                console.log('分配任务',res)
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        onLineBtn(){
            sysSortTableOnline(this.changeData).then((res)=>{
                console.log('上线',res)
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        offLineBtn(){
            sysSortTableOffline(this.changeData).then((res)=>{
                console.log('下线',res)
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 新增按钮
        addBtn(){
            this.showInput = true
            this.titleValue = '确认新增'
            this.showInputTitle = '新增编辑'
            this.CONSOLE_NAME = ''
            this.CONSOLE_IP = ''
            this.CONSOLE_STATUS = ''
            this.CONSOLE_WORKBIN_MAX_QUANTITY = ''
            this.CONSOLE_CALL_BY_WORKBIN = ''
            this.CONSOLE_CALL_BY_TOOL = ''
            this.CONSOLE_TYPE = ''
            this.CONSOLE_TOOL_MAX_QUANTITY = ''
        },
        // 新增操作台函数
        newConsoleBtn(){
            sysStNewConsole({
                'CONSOLENAME':this.CONSOLE_NAME,
                'CONSOLEIP':this.CONSOLE_IP,
                'CONSOLESTATUS':this.CONSOLE_STATUS,
                'CONSOLEWORKBINMAXQUANTITY':this.CONSOLE_WORKBIN_MAX_QUANTITY,
                'CONSOLECALLBYWORKBIN':this.CONSOLE_CALL_BY_WORKBIN,
                'CONSOLECALLBYTOOL':this.CONSOLE_CALL_BY_TOOL,
                'CONSOLETYPE':this.CONSOLE_TYPE,
                'CONSOLETOOLMAXQUANTITY':this.CONSOLE_TOOL_MAX_QUANTITY,
            }).then((res)=>{
                console.log('新增操作台',res)
                if(res.data.retCode == 200){
                    // 成功刷新接收台Table
                    this.$bus.$emit('sysStReTables','reTable')
                    // 刷新分拣台Table
                    this.$options.methods.searchBtn.bind(this)()
                    // 关闭showInput
                    this.showInput = false
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 修改操作台----分拣台
        changeFConsoleBtn(){
            if(this.CONSOLE_STATUS == '工作'){
                this.CONSOLE_STATUS = 1
            }else if(this.CONSOLE_STATUS == '停用'){
                this.CONSOLE_STATUS = 2
            }
            sysStUpdateConsole({
                'CONSOLEID':this.CONSOLEID,
                'CONSOLENAME':this.CONSOLE_NAME,
                'CONSOLEIP':this.CONSOLE_IP,
                'CONSOLESTATUS':this.CONSOLE_STATUS,
                'CONSOLEWORKBINMAXQUANTITY':this.CONSOLE_WORKBIN_MAX_QUANTITY,
                'CONSOLECALLBYWORKBIN':this.CONSOLE_CALL_BY_WORKBIN,
                'CONSOLECALLBYTOOL':this.CONSOLE_CALL_BY_TOOL,
                'CONSOLETYPE':2,
                'CONSOLETOOLMAXQUANTITY':this.CONSOLE_TOOL_MAX_QUANTITY,
            }).then((res)=>{
                console.log('更新操作台',res)
                if(res.data.retCode == 200){
                    // 成功刷新接收台Table
                    // this.$bus.$emit('sysStReTables','reTable')
                    // 刷新分拣台Table
                    this.$options.methods.searchBtn.bind(this)()
                    // 关闭showInput
                    this.showInput = false
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 修改操作台----接收台
        changeJConsoleBtn(){
            if(this.CONSOLE_STATUS == '工作'){
                this.CONSOLE_STATUS = 1
            }else if(this.CONSOLE_STATUS == '停用'){
                this.CONSOLE_STATUS = 2
            }
            sysStUpdateConsole({
                'CONSOLEID':this.CONSOLEID,
                'CONSOLENAME':this.CONSOLE_NAME,
                'CONSOLEIP':this.CONSOLE_IP,
                'CONSOLESTATUS':this.CONSOLE_STATUS,
                'CONSOLEWORKBINMAXQUANTITY':this.CONSOLE_WORKBIN_MAX_QUANTITY,
                'CONSOLECALLBYWORKBIN':this.CONSOLE_CALL_BY_WORKBIN,
                'CONSOLETYPE':1,
            }).then((res)=>{
                console.log('更新操作台',res)
                if(res.data.retCode == 200){
                    // 成功刷新接收台Table
                    this.$bus.$emit('sysStReTables','reTable')
                    // 刷新分拣台Table
                    // this.$options.methods.searchBtn.bind(this)()
                    // 关闭showInput
                    this.showInput = false
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                }else{
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 修改按钮 ---现在是分拣台双击修改事件
        changeFBtn(data){
            console.log(data)
            this.showInput = true
            this.titleValue = '确认修改'
            this.showInputTitle = '修改编辑'
            // input赋值
            this.CONSOLEID = data.CONSOLEID
            this.CONSOLE_NAME = data.CONSOLENAME
            this.CONSOLE_IP = data.CONSOLEIP
            this.CONSOLE_STATUS = data.CONSOLESTATUS
            this.CONSOLE_WORKBIN_MAX_QUANTITY = data.CONSOLEWORKBINMAXQUANTITY
            this.CONSOLE_CALL_BY_WORKBIN = data.CONSOLECALLBYWORKBIN
            this.CONSOLE_CALL_BY_TOOL = data.CONSOLECALLBYTOOL
            this.CONSOLE_TYPE = '分拣台'
            this.CONSOLE_TOOL_MAX_QUANTITY = data.CONSOLETOOLMAXQUANTITY
            console.log(this.CONSOLE_TYPE)
            // if(this.changeData.length == 1){
            //     this.showInput = true
            //     this.titleValue = '确认修改'
            //     this.showInputTitle = '修改编辑'
            //     // input赋值
            //     this.CONSOLE_NAME = this.changeData[0].CONSOLENAME
            //     this.CONSOLE_IP = this.changeData[0].CONSOLEIP
            //     this.CONSOLE_STATUS = this.changeData[0].CONSOLESTATUS
            //     this.CONSOLE_WORKBIN_MAX_QUANTITY = this.changeData[0].CONSOLEWORKBINMAXQUANTITY
            //     this.CONSOLE_CALL_BY_WORKBIN = this.changeData[0].CONSOLECALLBYWORKBIN
            //     this.CONSOLE_CALL_BY_TOOL = this.changeData[0].CONSOLECALLBYTOOL
            //     this.CONSOLE_TYPE = '接收台'
            //     this.CONSOLE_TOOL_MAX_QUANTITY = this.changeData[0].CONSOLETOOLMAXQUANTITY
            // }else {
            //   this.$Alert({
            //         title: "失败",
            //         message: '请勾选一条数据进行修改！',
            //         type: "error",
            //     });
            // }
        },
        // 接收台双击后传参调用的修改事件
        changeJBtn(){
            this.showInput = true
            this.titleValue = '确认修改'
            this.showInputTitle = '修改编辑'
            // input赋值
            this.CONSOLEID = this.midTableChangeData.CONSOLEID
            this.CONSOLE_NAME = this.midTableChangeData.CONSOLENAME
            this.CONSOLE_IP = this.midTableChangeData.CONSOLEIP
            this.CONSOLE_STATUS = this.midTableChangeData.CONSOLESTATUS
            this.CONSOLE_WORKBIN_MAX_QUANTITY = this.midTableChangeData.CONSOLEWORKBINMAXQUANTITY
            this.CONSOLE_CALL_BY_WORKBIN = this.midTableChangeData.CONSOLECALLBYWORKBIN
            this.CONSOLE_TYPE = '接收台'
            this.CONSOLE_CALL_BY_TOOL = ''
            this.CONSOLE_TOOL_MAX_QUANTITY = ''
            this.isCONSOLE_CALL_BY_TOOL = true
            this.isCONSOLE_TOOL_MAX_QUANTITY= true
        },
        // 删除
        deleteBtn(){
            if(this.deleteIdList == '') {
                this.$Alert({
                    title: "失败",
                    message: '请勾选数据进行删除！',
                    type: "error",
                });
            }else {
                sysStDeleteConsole({
                    data:this.deleteIdList
                }).then((res)=>{
                    console.log('删除',res)
                    if(res.data.retCode == 200){
                        // 成功刷新接收台Table
                        this.$bus.$emit('sysStReTables','reTable')
                        // 刷新分拣台Table
                        this.$options.methods.searchBtn.bind(this)()
                        this.$Alert({
                            title: "成功",
                            message: res.data.message,
                            type: "success",
                        });
                    }else{
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })
            }
        },
        // 保存按钮
        confirmChangeInfoBtn(){
            if(this.titleValue == '确认新增'){
                this.$options.methods.newConsoleBtn.bind(this)()
            }else if(this.titleValue == '确认修改'){
                if(this.CONSOLE_TYPE == '分拣台'){
                    this.$options.methods.changeFConsoleBtn.bind(this)()
                }else if(this.CONSOLE_TYPE == '接收台'){
                    this.$options.methods.changeJConsoleBtn.bind(this)()
                }
                
            }
        }
    },
    mounted(){
        this.$options.methods.searchBtn.bind(this)()
        // 接收MidTable勾选数据
        this.$bus.$on('sysStMidSelect',(e)=>{
            this.changeData = e
            console.log(this.deleteIdList)
            this.deleteIdList = []
            for(let i=0;i<e.length;i++){
                this.deleteIdList.push(e[i].CONSOLEID)
            }
            this.changeType = '接收台'
        })
        this.$bus.$on('sysStMidTableChange',(e)=>{
            console.log(e)
            this.midTableChangeData = e
            this.$options.methods.changeJBtn.bind(this)()
        })
    },
    watch:{
        'CONSOLE_TYPE':{
            immediate:true,
            deep:true,
            handler:function (val) {
                this.$nextTick(()=>{
                    if(this.CONSOLE_TYPE == 1){
                        this.isCONSOLE_CALL_BY_TOOL = true
                        this.isCONSOLE_TOOL_MAX_QUANTITY= true
                        this.CONSOLE_CALL_BY_TOOL = ''
                        this.CONSOLE_TOOL_MAX_QUANTITY = ''
                    }else{
                        this.isCONSOLE_CALL_BY_TOOL = false
                        this.isCONSOLE_TOOL_MAX_QUANTITY= false
                    }
                })
            }
        }
    }
}
</script>
<style scoped>
.sortingTableBox {
    width: 100%;
}
.tableBOx {
    width: 100%;
    text-align: center;
}
.ulNameBox {
    position: relative;
    width: calc(100% - 200px);
    height: calc(100% - 60px);
    position: absolute;
    top: 60px;
    left: 200px;
    z-index: 99;
    background: white;
}
.showInputClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.ulNameBox ul {
    margin-top: 5px;
    overflow: hidden;
}
.ulNameBox ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.ulNameBox ul li span {
  float: right;
}
.ulNameBox ul li div {
  float: right;
}
.el-input {
    width: 130px;
}
.el-select {
    width: 130px;
}
</style>